<template>
    <div class="user-info">
        <div class="info-item">
            <div class="s-b">
                <div class="avatar f-s">
                    <img :src="userInfo.avatar" alt="" >
                    {{userInfo.nickname}}
                    <template v-if='$route.params.id'>
                        <el-button :type="userInfo.trust_status == 0 ? 'primary' : 'danger'" size='small' style="margin:0 15px;" @click='changeStatus(`trust`)'>
                            {{userInfo.trust_status == 0 ? '信任' : '已信任'}}
                        </el-button>
                        <el-button :type="userInfo.barrier_status == 0 ? 'primary' : 'danger'" size='small' @click='changeStatus(`barrier`)'>
                            {{userInfo.barrier_status == 0 ? '屏蔽' : '已屏蔽'}}
                        </el-button>
                    </template>
                </div>
                <div class="f-s">
                    <div class="auth-item f-s">
                        <i class="el-icon-s-fold" :class="userInfo.is_email_bind ? 'blue' : 'gray'"></i>
                        郵箱認證
                    </div>
                    <div class="auth-item f-s">
                        <i class="el-icon-phone" :class="userInfo.is_bind ? 'blue' : 'gray'"></i>
                        手機認證
                    </div>
                    <div class="auth-item f-s">
                        <i class="el-icon-user-solid" :class="userInfo.auth_status == 1 ? 'blue' : 'gray'"></i>
                        身份認證
                    </div>
                </div>
            </div>
            <div class="trade-info f-s">
                <div class="trade-item">
                    <h1>{{userInfo.trade_times}}</h1>
                    <p>交易</p>
                </div>
                <div class="trade-item">
                    <h1>{{userInfo.trust_number}}</h1>
                    <p>信任</p>
                </div>
                <div class="trade-item">
                    <h1>{{userInfo.praise_rate}}</h1>
                    <p>好評</p>
                </div>
            </div>
            <div class="user-desc">
                <h1>
                    個人簡介：
                    <template v-if='!is_in_edit_desc'>
                        <span>{{userInfo.profile ? userInfo.profile : '暂无'}}</span>
                        <el-button type='text' class="edit-desc" @click='is_in_edit_desc = true'>編輯</el-button>
                    </template>
                    <template v-else>
                        <div style="margin-top : 15px;">
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6}"
                                placeholder="請輸入您的個人介紹，不超過300個字"
                                maxlength="300"
                                show-word-limit
                                v-model="userInfo.profile">
                            </el-input>
                            <div  class="save-desc">
                                <el-button type="primary" size="small" @click='saveProfile'>保存</el-button>
                            </div>
                        </div>
                    </template>
                </h1>
            </div>
        </div>
        <div class="info-item">
            <h1 class="title">
                向{{userInfo.nickname}}出售
            </h1>
            <el-table
                :header-cell-style="{background : '#f1f1f1'}"
                :data='userInfo.buy_list'>
                <el-table-column label='幣種' prop='code'></el-table-column>
                <el-table-column label='限額' prop='max_money'></el-table-column>
                <el-table-column label='付款方式' prop=''>
                    <template slot-scope="scope">
                        <pay-type :pay-ment='scope.row.pay_type'></pay-type>
                    </template>
                </el-table-column>
                <el-table-column label='價格' prop='price'></el-table-column>
                <el-table-column label='交易' prop=''>
                    <template slot-scope="scope">
                        <el-button type='primary' size='small' v-if='$route.params.id' @click="$router.push(`/trade-ad-detail/sell/${scope.row.id}`)">出 售</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="info-item">
            <h1 class="title">
                從{{userInfo.nickname}}購買
            </h1>
            <el-table
                :header-cell-style="{background : '#f1f1f1'}"
                :data='userInfo.sell_list'>
                <el-table-column label='幣種' prop='code'></el-table-column>
                <el-table-column label='限額' prop='max_money'></el-table-column>
                <el-table-column label='付款方式' prop=''>
                    <template slot-scope="scope">
                        <pay-type :pay-ment='scope.row.pay_type'></pay-type>
                    </template>
                </el-table-column>
                <el-table-column label='價格' prop='price'></el-table-column>
                <el-table-column label='交易' prop=''>
                    <template slot-scope="scope">
                        <el-button type='primary' size='small' v-if='$route.params.id' @click="$router.push(`/trade-ad-detail/buy/${scope.row.id}`)">購 買</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { GetUserInfo, UserUpdate, TrustHandle } from '@/api/user'
    import PayType from '@/components/PayType'
    export default {
        components :{
            PayType
        },
        data () {
            return {
                is_in_edit_desc : false,
                user_desc : null,
                userInfo : {
                    avatar : null,
                    auth_status : null,
                    nickname : null,//昵称
                    buy_list : null,//购买广告列表
                    sell_list : null,//出售广告列表
                    profile : null,//个人简介
                    trade_times : null,//交易次数
                    trust_number : null,//信任数量
                    praise_rate : null,//好评率
                    is_email_bind : null,//是否绑定了邮箱
                    is_bind : null,//是否绑定了手机
                    trust_status : 0,//0表示已信任
                    barrier_status : 0,//0表情未屏幕
                }
            }
        },
        created () {
            GetUserInfo({
                is_self : this.$route.params.id ? 0 : 1,//是否获取的是自己的信息 1是  0不是
                show_user_id : this.$route.params.id
            }).then(res => {
                console.log(res)
                this.userInfo = res.result;
            })
        },
        methods :{
            saveProfile () {
                if (!this.userInfo.profile) {
                    this.$alert('请输入您的个人简介', '提示');
                    return;
                }
                UserUpdate({
                    update_type : 'profile',
                    profile : this.userInfo.profile
                }).then(res => {
                    this.$message({
                        message : '保存成功',
                        type : 'success'
                    })
                    this.is_in_edit_desc = false;
                })
            }, 
            //修改信任和屏蔽状态
            changeStatus (flag) {
                TrustHandle({
                    record_type : flag == 'trust' ? 1 : 2, //1为信任操作，2为屏蔽操作
                    to_user_id : this.$route.params.id,
                    status : flag == 'trust' ? Number(!this.userInfo.trust_status) : Number(!this.userInfo.barrier_status)
                }).then(res => {
                    if (flag == 'trust') {
                        this.userInfo.trust_status = Number(!this.userInfo.trust_status)
                    } else {
                        this.userInfo.barrier_status = Number(!this.userInfo.barrier_status)
                    }
                    // console.log()
                })
            }
        }
    }
</script>

<style lang='less' scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {}
    @media screen and (min-width : 670px) {
        .user-info {
            width: 1200px;
            margin: 30px auto;
            .info-item {
                background: #fff;
                padding: 25px;
                margin-bottom: 50px;
                .avatar {
                    font-size: 15px;
                    img {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }
                .auth-item {
                    margin-right: 25px;
                    font-size:16px;
                    i {
                        font-size: 20px;
                        margin-right: 10px;
                    }
                    .blue {
                        color: @mainColor;
                    }
                    .gray {
                        color: #aba0a0;
                    }
                }
                .trade-info {
                    padding: 15px 50px;
                    text-align: center;
                    .trade-item {
                        margin-right: 100px;
                        h1 {
                            font-size: 28px;
                            margin: 10px;
                        }
                        p {
                            font-size: 15px;
                        }
                    }
                }
                .user-desc {
                    .edit-desc {
                        margin-left: 15px;
                    }
                    .save-desc {
                        margin-top: 15px;
                        text-align: right;
                    }
                }
                .title {
                    font-size: 24px;
                    // font-weight: bold;
                    margin-bottom: 15px;
                }
            }
        }
    }
</style>
